<template>
  <CommonPanel title="告警事件类型统计" :loading="loading">
        <div class="content-box1">
      <div class="content-box1_top">总访客数量
        <span>{{data?.visitor_today?.signTotal}}</span>
      </div>
      <div class="content-box1_bottom">
        <div class="connent-box">
          <div class="connent-box_top">
          <div class="value-box">{{ data?.visitor_today?.appointmentTotal}}</div>
            <div class="text-box">预约访客数量</div>
          </div>
          <div class="connent-box_bottom">
            <div class="value-box">{{ data?.visitor_today?.visitCount }}</div>
            <div class="text-box">访客在访数量</div>
          </div>
        </div>
        <div class="connent-box">
          <div class="connent-box_top">
            <div class="value-box"> {{data?.visitor_today?.notSignOutTotal}}</div>
            <div class="text-box">超期未签离访客数量</div>
          </div>
          <div class="connent-box_bottom">
            <div class="value-box">{{data?.visitor_today?.signOutTotal}}</div>
            <div class="text-box">已签离访客数量</div>
          </div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import { defineProps } from 'vue';
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  data: Object
});

watch(() => props.data, (newData) => {
      if (newData) {
        let data = newData.visitor_today;
      }
    });


</script>
<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    .echart-box {
      flex: 0.7;
      height: 100%;
    }

    .connent-box {
      flex: 1.3;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-row-gap: 5px;

      &_top {
        background: url('../../../assets/image/device1.png') no-repeat center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-size: 60%;
      }

      &_bottom {
        background: url('../../../assets/image/device2.png') no-repeat center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-size: 60%;
      }

      .value-box {
        margin-left: 50%;
        color: #fff;
        font-size: 24px;
      }

      .text-box {
        margin-left: 50%;
        margin-top: 10px;
        color: #fff;
        font-size: 14px;
      }

    }

  }
}
</style>

